<template>
  <div class="app-container checked">
    <div class="filter-container">
      <el-input v-model.trim="query.query.purchaseOrderNo" clearable placeholder="请输入订单编号"
        @keyup.enter.native="search" />
      <el-input v-model.trim="query.query.customerName" clearable placeholder="请输入供应商名称" @keyup.enter.native="search" />
      <el-input v-model.trim="query.query.material" clearable placeholder="请输入物料编号" @keyup.enter.native="search" />
      <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('table.search') }}</el-button>
      <el-button type="primary" icon="el-icon-upload2" @click="importExport">导入OTC</el-button>
    </div>
    <el-table :data="tableData" highlight-current-row border :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="purchaseOrderNo" label="订单编号" fixed="left" />
      <el-table-column prop="enduserName" label="供应商名称" />
      <el-table-column prop="materialName" label="物料名称" />
      <el-table-column prop="orderedQty" label="订购数量" />
      <!-- <el-table-column prop="sellingPrice" label="销售价格" /> -->
      <el-table-column prop="shipToName" label="收货地" />
      <el-table-column prop="arriveDate" label="原到达日期">
        <template slot-scope="{row}">
          <span>{{ row.arriveDate | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="productDate" label="原生产日期">
        <template slot-scope="{row}">
          <span>{{ row.productDate | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="latestArriveDate" label="最新到达日期">
        <template slot-scope="{row}">
          <span>{{ row.latestArriveDate | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="latestProductDate" label="最新生产日期">
        <template slot-scope="{row}">
          <span>{{ row.latestProductDate | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="rddItem" label="预计交货日期">
        <template slot-scope="{row}">
          <span>{{ row.rddItem | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="materialAvailDate" label="确认交货日期">
        <template slot-scope="{row}">
          <span>{{ row.materialAvailDate | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deliveryNo" label="交货单号" /> -->
      <el-table-column label="需求日期" prop="demandDate" width="100">
        <template slot-scope="{ row }">
          <span>{{ getMoment(row.demandDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createdOn" label="创建日期">
        <template slot-scope="{row}">
          <span>{{ row.createdOn | parseTime('{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="OTC导入" width="400px" :visible.sync="importExportVisible" @closed="handleClose" :close-on-click-modal="false">
      <div>
        <el-button type="text" @click="downloadExcel">下载模版</el-button>
        <el-upload ref="elUpload" drag :auto-upload="false" action="#" :limit="1" :on-change="handleChange"
          :on-remove="handleRemove">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importExportVisible = false">取 消</el-button>
        <el-button type="primary" @click="importExportSure">确 定</el-button>
      </span>
    </el-dialog>
    <pagination v-show="total > 0" :total="total" :page.sync="query.pageIndex" :limit.sync="query.pageSize"
      @pagination="getInfo" />
  </div>
</template>
<script>
import { orderPageList } from '@/api/productionPlan'
import { orderImportOtc } from '@/api/weeklyStoragePlan'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { downLoadTemplate } from '@/utils'
import moment from "moment";
export default {
  name: 'Productionplan',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      importExportForm: {},
      importExportVisible: false,
      selectedList: [],
      total: 0,
      query: {
        pageSize: 10,
        pageIndex: 1,
        query: {}
      },
      tableData: [],
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    getMoment(day) {
      if (!day) return "";
      return moment(day).format("YYYY-MM-DD");
    },
    handleClose() {
      this.handleRemove()
      this.$refs['elUpload'].clearFiles()
    },
    async importExportSure() {
      if (!this.importExportForm.file) {
        this.$message.warning('请先上传商品数据')
        return false
      }
      const formData = new FormData()
      for (let key in this.importExportForm) {
        formData.append(key, this.importExportForm[key])
      }
      await orderImportOtc(formData)
      this.getInfo()
      this.$message.success('导入成功')
      this.importExportVisible = false
    },
    handleChange(file, fileList) {
      this.importExportForm.file = file.raw
    },
    handleRemove() {
      this.importExportForm.file = ''
    },
    downloadExcel() {
      downLoadTemplate('OTC导入模版.xlsx', 'OTCtemplate.xlsx')
    },
    importExport() {
      this.importExportVisible = true
    },
    async getInfo() {
      const { records, total } = await orderPageList(this.query)
      this.tableData = records
      this.total = total
    },
    search() {
      this.query.pageIndex = 1
      this.getInfo()
    }
  }
}
</script>
